<template>
	<view class="page">
		<view class="cus-nav-bar">
			<!-- <view class="statusBar"></view> -->
			<view class="navBar"  :style="'height: 42rpx;line-height:42rpx;'">
				<view style="position: absolute;">
					<slot></slot>
				</view>
				<view class="goback" @click="goback" v-if="backShow">
					<image src="../static/img/back.png" mode="aspectFit"></image>
				</view>
				<view class="title">{{title}}</view>
			</view>
		</view>
		<view class="nav-occupy">
			<!-- <view class="statusBar"></view> -->
			<view :style="'height:42rpx;'"></view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		props:{
			title: {
				type: String,
				default: ''
			},
			backShow:{
				type: Boolean,
				default: true
			},
			goback:{
				type: Function,
				default: ()=>{
					return function(){
						uni.navigateBack()
					}
				}
			}
		},
		mounted(){
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/style/public.css';
	.page{
		width: 100%;
	}
	.f14{font-size: 14px;}
	.cus-nav-bar{
		background: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}


	// .statusBar{
	// 	width: 100%;
	// 	height: 20px;
	// }
	.navBar{
		position: relative;
		box-sizing: border-box;
		height: 44px;
		box-sizing: border-box;
		// padding-top: 6px;
	}
	.goback{
		position: absolute;
		left: 20rpx;
		padding: 6rpx 26rpx;
		image{
			width: 18rpx;
			height: 30rpx;
		}
	}
	.title{
		text-align: center;
		width: 750rpx;
		height: 100%;
		color: #2ca1ff;
		// font-size: 42rpx;
		font-size: 24rpx;
		font-weight: bold;
		font-family: '苹方';
	}
</style>
